<template>
  <view class="list-content">
    <template v-if="list &&list.length">
      <view v-for="(item, index) in list" :key="item[keyof]" class="card-item">
        <slot :item="item" :index="index"></slot>
      </view>
    </template>
    <template v-else>
      <Empty text="暂无相关数据">
        <view class="empty-content">
          <image class="empty-img" src="@/assets/images/no_notice.png" mode="heightFix" />
        </view>
      </Empty>
    </template>
  </view>
</template>
<script lang="ts" setup>
import Empty from '../Empty/Empty.vue'
type Item = Record<string, any>
defineProps<{ list: Item[]; keyof: keyof Item }>()
</script>
<style lang="scss" scoped>
.list-content {
  background: #f7fafc;
  // padding: 20rpx;
  // display: grid;
  //   grid-gap: 10px;
  //   justify-content: center;
  //   grid-template-columns: repeat(auto-fill, 185px);
  // padding: 20rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .card-item {
    margin-bottom: 20rpx;
  }

  .empty-content {
    text-align: center;
    margin-top: 300rpx;

    .empty-img {
      height: 320rpx;
    }
  }
}
</style>
